<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>line</title>
    <script src="../libs/system.js"></script>
    <script>
        System.import('../libs/cc.js');
    </script>

    <script src="../src/debugUtils.js"></script>
    <script src="../src/graphics.js"></script>

<!--    <script src="../src/renderer.js"></script>-->
</head>
<body>
<canvas id="game"></canvas>
</body>
<script>

    let canvas,ctx;
    const DevWidth = 320;
    const DevHeight = 240;
    const DevScale = 2;
    let imageData;
    let offCtx,offCanvas;
    window.onload = function () {

        console.log('--------------------------------');
        for(let k in cc.math){
            console.log(k);
        }
        console.log('----------end cocos key----------------------');

        canvas = document.getElementById('game');
        ctx = canvas.getContext('2d');
        canvas.width = canvas.clientWidth = DevWidth * DevScale;
        canvas.height = canvas.clientHeight = DevHeight * DevScale;
        canvas.style.background = '#000';

        init();
        loop();
    };

    function init() {
        initOffCanvas();
        graphics.init(imageData);

        ctx.scale(DevScale,DevScale);
    }

    function loop(){

        graphics.clear();

        // let v0 = cc.v2(265,160);
        // let v1 = cc.v2(245,126);
        // let v2 = cc.v2(221,119);
        // let v3 = cc.v2(336,109);
        // // graphics.drawLine(v0.x,v0.y,v1.x,v1.y,cc.Color.YELLOW);
        // // graphics.drawLine(v1.x,v1.y,v2.x,v2.y,cc.Color.YELLOW);
        // // graphics.drawLine(v2.x,v2.y,v0.x,v0.y,cc.Color.YELLOW);
        //
        // // graphics.drawLine(v0.x,v0.y,v2.x,v2.y,cc.Color.YELLOW);
        // graphics.drawLine(v2.x,v2.y,v3.x,v3.y,cc.Color.YELLOW);
        // // graphics.drawLine(v3.x,v3.y,v0.x,v0.y,cc.Color.YELLOW);

        // 绘制一个
        // start draw--------------------------------
        let x = cc.math.randomRangeInt(0,DevWidth/2);
        let y = cc.math.randomRangeInt(0,DevHeight/2);
        let rect = cc.rect(x,y,DevWidth/2,DevHeight/2);
        console.time('DRAW');
        for(let i = 0; i < 100; ++i){
            let x1 = cc.math.randomRangeInt(0,DevWidth);
            let y1 = cc.math.randomRangeInt(0,DevWidth);
            let x2 = cc.math.randomRangeInt(0,DevWidth);
            let y2 = cc.math.randomRangeInt(0,DevWidth);

            // let x1 = DevWidth/2;
            // let y1 = DevHeight - 10;
            // let x2 = DevWidth/2;
            // let y2 = 10;
            graphics.drawLine(x1,y1,x2,y2,cc.Color.YELLOW,rect);
        }
        console.timeEnd('DRAW');
        // end draw---------------------------------



        offCtx.putImageData(imageData,0,0);

        // swapbuffer
        ctx.clearRect(0,0,canvas.width,canvas.height);
        ctx.drawImage(offCanvas,0,0);

        // requestAnimationFrame(loop);
    }

    function initOffCanvas() {
        offCanvas = document.createElement('canvas');
        offCanvas.width = offCanvas.clientWidth = DevWidth;
        offCanvas.height = offCanvas.clientHeight = DevHeight;
        offCtx = offCanvas.getContext('2d');

        imageData = ctx.createImageData(DevWidth,DevHeight);

        // let data = imageData.data;
        // for(let i = 0; i < data.length; i+= 4){
        //     data[i] = 0;
        //     data[i+1] = 0;
        //     data[i+2] = 0;
        //     data[i+3] = 255;
        // }


        // renderer = new Renderer(imageData);
        // console.time("RRR");
        // // 随机画100个
        // for(let i = 0; i < 100; ++i){
        //     let x = cc.math.randomRangeInt(0,DevWidth);
        //     let y = cc.math.randomRangeInt(0,DevHeight);
        //     let size = cc.math.randomRangeInt(1,10);
        //     renderer.pointRender.drawPoint(x,y,cc.Color.RED,size);
        // }
        // console.timeEnd('RRR');

        //---------------------------------------

        // draw
        // mem.pixel(100,100,cc.Color.GREEN);

        // mem.line(10,10,DevWidth-1,DevHeight-1,cc.Color.GREEN);
        // mem.line(10,10,200,45,cc.Color.GREEN);
        // mem.line(10,10,45,200,cc.Color.RED);
        // mem.line(10,180,200,22,cc.Color.YELLOW);
        // mem.line(10,180,40,22,cc.Color.WHITE);

    }


    function drawCircleLine() {
        let c_x = DevWidth/2;
        let c_y = DevHeight/2;
        let R = 100;
        for(let i = 0; i < 360; ++i){
            let rad = i * Math.PI / 180;
            let x = Math.cos(rad) * R + c_x;
            let y = Math.sin(rad) * R + c_y;
            graphics._line(c_x,c_y,~~x,~~y,cc.Color.GREEN);
        }
    }
</script>
</html>
